<template>
  <div class="xchart-wrapper" :ref="guid" v-resize="chartResize" ></div>
</template>

<script>
import * as echarts from 'echarts';
import echartOptions from "@/components/bigScreen/js/echartOptions";
import "echarts-liquidfill";
import Bus from '@/utils/bus'

export default {
  name: "xChartWrapper",
  data(){
    return{
      guid:"",
      type:"",
      options:{},
      chart:{}
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
  },
  computed:{},
  directives:{//注册指令
    resize:{
      bind(el,binding){
        let width ='',height='';
        function isResize(){
          let style=document.defaultView.getComputedStyle(el);
          if(width!==style.width||height!==style.height){
            binding.value();
          }
          width=style.width;
          height=style.height;
        }
        el._vueSetInterval_=setInterval(isResize,300);
      },
      unbind(el){
        clearInterval(el._vueSetInterval_);
      }
    }
  },
  beforeMount() {
    this.setChartGuid();
  },
  beforeUnMount() {
    if(!this.chart){
      return;
    }
    this.chart.dispose();
    this.chart=null;
  },
  created() {
    let that = this;
    Bus.$on("reInitXChartsWrapper", msg => {
      that.type=that.item.chartOption.type;
      that.options=that.item.chartOption;
      that.createChartByOption();
      this.$forceUpdate();

    })
    Bus.$on("resizeXChartsWrapper", msg => {
      that.chartResize();
    })
    Bus.$on("createXChartWrapperByOption", msg => {
     // that.type=msg[0].chartOption.type;
     // that.options=msg[0].chartOption;
     // that.createChartByOption();
      this.$forceUpdate();
    //  that.item=msg[0];
    //
    })
    // this.$watch(
//       function () { // 第一个函数就是处理你要监听的属性，只要将其return出去就行
//         return this.obj['item.chartOption.series[0].data'];
//       },
//       function (old, valold) {
// alert("ds");
//       })

  },
  beforeDestroy() {
    Bus.$off('resizeXChartsWrapper');
    Bus.$off('reInitXChartsWrapper');
    Bus.$off('createXChartWrapperByOption');
  },
  mounted() {
    let that = this;
    this.$nextTick(function(){
      if(that.item.chartOption){
        if(that.item.chartOption.type){
          that.type=that.item.chartOption.type;
          that.options=that.item.chartOption;
        }
      }
      that.createChartByOption();
    });
  },
  methods:{
    chartResize(){
      this.chart.resize();
    },
    /**
     * 创建图表
     */
    createChartByOption(){
      let that = this;
      if(that.options){
        let chart = echarts.init(that.$refs[that.guid]);
        let options = that.getChartsOptionByKey(that.options);
        if(options){
          chart.setOption(options);
          that.chart = chart;
        }
      }
    },
    getChartsOptionByKey(chartOption){
      let option = {};
      switch (chartOption.type) {
        case "liquidfill"://水球图表
          option = echartOptions.liquidfillCharts.SetOptionForLiquidfillCharts(chartOption);
          break;
        case "ringPercent"://百分比
          option = echartOptions.ringPercentCharts.SetOptionForRingPercentCharts(chartOption);
          break;
        case "bar"://柱状图+折线图
          option = echartOptions.barCharts.SetOptionForBarCharts(chartOption);
          break;
        case "pie"://饼状图
          option = echartOptions.pieCharts.SetOptionForPieCharts(chartOption);
          break;
        case "ring"://环
          option = echartOptions.ringCharts.SetOptionForRingCharts(chartOption);
          break;
        case "radar"://雷达图
          option = echartOptions.radarCharts.SetOptionForRadarCharts(chartOption);
          break;
        case "gauge"://仪表图
          option = echartOptions.gaugeCharts.SetOptionForGaugeCharts(chartOption);
          break;
          /*case "liquidfill_st"://生态空间
           option = liquidfillCharts.SetOptionForLiquidfillCharts_st();
           break;
           case "liquidfill_cz"://城镇空间
           option = liquidfillCharts.SetOptionForLiquidfillCharts_cz();
           break;
           case "liquidfill_ny"://农业空间
           option = liquidfillCharts.SetOptionForLiquidfillCharts_ny();
           break;
           case "ring_byl"://自然资源保有量
           var year = $(e).attr("year");
           var value = $(e).attr("value");
           option = ringPercentCharts.SetOptionForRingPercent(year + "年", value);
           break;
           case "bar_tdkfly"://土地开发利用(分类)旧
           option = barCharts.SetOptionForBar_tdkfly();
           break;
           case "bar_zrzy"://土地开发利用
           option = barCharts.SetOptionForBar_zrzy();
           break;
           case "radar_atmosphereQuality"://大气质量
           option = radarCharts.SetOptionForRadar_atmosphereQuality("大气质量");
           break;
           case "radar_waterEnvironment"://水环境
           option = radarCharts.SetOptionForRadar_waterEnvironment("水环境");
           break;
           case "radar_soilQuality"://土壤质量
           option = radarCharts.SetOptionForRadar_soilQuality("土壤质量");
           break;
           case "radar_biodiversity"://生物多样性
           option = radarCharts.SetOptionForRadar_biodiversity("生物多样性");
           break;*/
      }
      return option;
    },
    setChartGuid(){
      let guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){
        let r = Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);
        return v.toString(16);
      });
      this.guid=this.type+"_"+guid;
      return this.guid;
    }
  },
  watch:{
    'item.datachange':function(nValue, oValue){
      // alert("d");
    },
    // 'item.chartOption.series[0].data':function(nValue, oValue){
    //   alert("d");
    //   that.type=that.item.chartOption.type;
    //   that.options=that.item.chartOption;
    //   that.createChartByOption();
    // }
  },
}
</script>

<style lang="css" scoped src="@/components/bigScreen/css/screen.main.css"></style>
<style scoped>
</style>
